<script lang="ts" setup>
import Menu from '@/model/common/menu';

const props = defineProps<{
  menuList: Array<Menu>;
  currentIndexPath: Array<string>;
}>();

/**
 * 当前菜单是不是激活状态（非最后一级）
 * @param id 菜单的id
 */
const isSubMenuActive = (id: string) => {
  return props.currentIndexPath.includes(id);
};

/**
 * 菜单icon颜色（非最后一级）
 * @param color 颜色#xxxxxx
 */
const getSubMenuIconStyle = (color: string) => {
  return `color: ${color}`;
};

/**
 * 菜单字体颜色（非最后一级）
 * @param color 颜色#xxxxxx
 */
const getSubMenuTextStyle = (color: string) => {
  return `border-bottom: ${color} 1px solid; height: 30px; line-height: 30px`;
};
</script>

<template>
  <template v-for="item in menuList">
    <el-sub-menu
      v-if="item.children && item.children.length > 0"
      :index="item.id"
      :key="item.id"
    >
      <template #title>
        <el-icon size="24">
          <component
            :is="item.iconName"
            class="menu menu-icon"
            :style="isSubMenuActive(item.id) ? getSubMenuIconStyle(item.iconColor) : ''"
          />
        </el-icon>
        <!--<span class="menu menu-text">{{ item.name }}</span>-->
        <span
          class="menu menu-text"
          :style="isSubMenuActive(item.id) ? getSubMenuTextStyle(item.iconColor) : ''"
        >{{ item.name }}</span
        >
      </template>
      <menu-tree :menu-list="item.children" :current-index-path="currentIndexPath" />
    </el-sub-menu>
    <el-menu-item v-else :index="item.url" :key="item.id + 1">
      <template #default>
        <div
          v-if="currentIndexPath[currentIndexPath.length - 1] === item.url"
          class="is-menu-item-active"
          :style="'background-color:' + item.iconColor + ';'"
        >
          <el-icon :size="24">
            <component :is="item.iconName" class="menu menu-icon is-text-active" />
          </el-icon>
          <span class="menu menu-text is-text-active">{{ item.name }}</span>
        </div>
        <div v-else>
          <el-icon :size="24">
            <component :is="item.iconName" class="menu menu-icon" />
          </el-icon>
          <span class="menu menu-text">{{ item.name }}</span>
        </div>
      </template>
    </el-menu-item>
  </template>
</template>

<style scoped lang="scss">
.menu {
  color: #666666;
  font-size: 16px;
}

::v-deep(.el-sub-menu__title:hover) {
  background: none;
}

.el-menu-item:hover {
  background: none;
}

.menu-icon {
  width: 20px;
  height: 20px;
}

.menu-text {
  margin-left: 5px;
  text-align: justify;
  text-justify: distribute-all-lines;
  text-align-last: justify;
  width: 80px;
}

.is-sub-menu-active {
  background-color: #22c3aa;
  border-radius: 18px;
}

.is-text-active {
  color: #ffffff;
}

.is-menu-item-active {
  border-radius: 8px;
  width: 100%;
  height: 40px;
  line-height: 40px;
}
</style>
